<template>
  <div>
    <transition v-if="modal" enter-active-class="animate__animated animate__fadeIn animate__faster"
                leave-active-class="animate__animated animate__fadeOut animate__faster" @before-leave="leavingEvent">
      <div class="lsDialogMask" v-show="value" @mousedown.left.self="modalClick(true)"
           @mouseup.left.self="modalClick(false)">
        <LsDialogPanel :titleText="titleText" :width="width" :full-screen="fullScreen" :height="height"
                       :show-full-screen="!fullScreen && showFullScreen" :fit-height="fitHeight"
                       v-show="value" :close-confirm="closeConfirm" :close-tip="closeTip" :close-dialog="closeDialog"
                       :box-center="boxCenter" :left="left" :top="top" :bottom="bottom" :right="right"
                       :show-footer="showFooter" :draggable="draggable"
                       @confirm="confirm" ref="lsDialogPanel" @sizeChange="sizeChange">
          <template #default>
            <slot></slot>
          </template>
          <template #footer>
            <slot name="footer" :closeDialog="closeDialog">
            </slot>
          </template>
        </LsDialogPanel>
      </div>
    </transition>
    <LsDialogPanel v-else v-show="value" :titleText="titleText" :width="width" :full-screen="fullScreen"
                   :show-full-screen="!fullScreen && showFullScreen" :close-confirm="closeConfirm"
                   :height="height" :close-tip="closeTip" :fit-height="fitHeight" @sizeChange="sizeChange"
                   :box-center="boxCenter" :left="left" :top="top" :bottom="bottom" :right="right"
                   :show-footer="showFooter" :close-dialog="closeDialog" :draggable="draggable"
                   @confirm="confirm" ref="lsDialogPanel">
      <template #default>
        <slot></slot>
      </template>
      <template #footer>
        <slot name="footer" :closeDialog="closeDialog">
        </slot>
      </template>
    </LsDialogPanel>
  </div>
</template>

<script>
import LsDialog from "./lsDialog";

export default LsDialog
</script>

<style>
.lsDialogMask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  left: 0;
  top: 0;
}
</style>
